<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
    <title>后台管理系统</title>
    <style>
    .el-input-number.is-controls-right .el-input-number__decrease, .el-input-number.is-controls-right .el-input-number__increase{    line-height: 14px;}
    .el-input-number__decrease, .el-input-number__increase{top:4px;}
    </style>
</head>
<body>
<div id="maindiv" class="maindiv mainPadding" style="display: none;">    
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>业务设置</el-breadcrumb-item>
        <el-breadcrumb-item>经纪IM授权管理</el-breadcrumb-item>
    </el-breadcrumb>  
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
           <el-form :inline="true" :model="form" class="demo-form-inline mainSearchForm" ref="form">
                <el-form-item label="经纪组:">
                    <el-select v-model="form.teleGroupId" placeholder="经纪组" style="width: 100%;" clearable filterable @change="changeTeleGroup" :disabled="teleGroupDisabled">
                        <el-option
                            v-for="item in orgTeleArr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="经纪名称:">
                    <el-select v-model="form.teleSaleId" placeholder="经纪" style="width: 100%;" clearable filterable>
                        <el-option
                            v-for="item in teleSaleArr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>  
                <el-form-item label="授权状态:">  
                    <el-select v-model="form.imAuthorizeStatus" placeholder="全部" style="width: 100%;" clearable filterable>
                        <el-option
                            v-for="item in isAuthorizeArr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
               <el-form-item label="加盟顾问组:">
                   <el-select v-model="form.gwGroupId" placeholder="加盟顾问组" style="width: 100%;" clearable filterable @change="changeConGroup" :disabled="teleGroupDisabled">
                       <el-option
                               v-for="item in gwGroupList"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                       </el-option>
                   </el-select>
               </el-form-item>
               <el-form-item label="加盟顾问名称:">
                   <el-select v-model="form.teleConId" placeholder="加盟顾问名称" style="width: 100%;" clearable filterable>
                       <el-option
                               v-for="item in teleConArr"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                       </el-option>
                   </el-select>
               </el-form-item>
               <div class="mainSearchBtnBox">
                    <el-button icon="el-icon-search" type="primary" @click="searchTable(1)" class="searchBtn">搜索</el-button>
                    <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
                    <!-- <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span v-if="isShow">收起</span><span v-else>展开更多</span><i :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span> -->
                </div>  
            </el-form>
        </div>
        <el-row>
            <el-table 
                ref="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                border
                :data="tableData"
                v-loading="loading">
                <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
                <el-table-column prop="roleCodeName" align="center" label="角色">
                </el-table-column>
                <el-table-column prop="teleGroupName" align="center" label="所属组">
                </el-table-column>
                <el-table-column prop="teleSaleName" align="center" label="姓名">
                </el-table-column>
                <el-table-column prop="imStatus" align="center" label="IM状态">
                    <!-- 在线状态 1-在线、2-忙碌、3-离线 -->
                    <template slot-scope="scope">
                        <div v-if="scope.row.imStatus === 1">
                            在线
                        </div>                    
                        <div v-else-if="scope.row.imStatus === 2">
                            忙碌
                        </div>
                        <div v-else-if="scope.row.imStatus === 3">
                            离线
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="imAuthorizeStatus" align="center" label="授权状态">
                    <!-- 授权状态 1-已授权、2-未授权 -->
                    <template slot-scope="scope">
                        <div v-if="scope.row.imAuthorizeStatus === 1">
                            已授权
                        </div>
                        <div v-else-if="scope.row.imAuthorizeStatus === 2">
                            未授权
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="userAvgDayValidCallTime" align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button  v-if="scope.row.imAuthorizeStatus === 1" @click="updateStatus(scope.row.teleSaleId)" type="primary"  size="small" style="width: 90px;">IM授权修改</el-button>
                        <el-button  v-else-if="scope.row.imAuthorizeStatus === 2" @click="updateStatus(scope.row.teleSaleId)"  type="success"  size="small" style="width: 90px;">IM授权</el-button>
                        
                        <el-button  v-if="scope.row.imAuthorizeStatus === 1" @click="untie(scope.row.id,scope.row.teleSaleId)" type="danger"  size="small" style="width: 90px;">解绑IM</el-button>
                        
                        <el-button  v-if="scope.row.teleCardStatus === 0" @click="openCard(scope.row.teleSaleId,scope.row.teleSaleName)" size="small" type="warning" style="margin-left: 10px;">名片设置</el-button>
                        
                        <el-button v-else-if="scope.row.teleCardStatus === 1" @click="openCard(scope.row.teleSaleId,scope.row.teleSaleName)" size="small" type="success" style="margin-left: 10px;">修改名片</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <table-pagination :pager="pager" @change="searchTable()"></table-pagination>
        </el-row>
    </div>
    <!-- 名片弹窗 -->
    <el-dialog title="名片" :visible.sync="cardVisible" width="540px" @close="cardCancel">
        <template>
            <el-form :model="cardForm" ref="cardForm" :rules="cardFormRules">
                <el-form-item label="姓名："  label-width="180px">
                    <span>{{cardTeleSale?cardTeleSale:""}}</span>
                </el-form-item>
                <el-form-item label="职级："  label-width="180px"  prop="rank">
                    <el-select v-model="cardForm.dictionaryRankId" placeholder="全部"  style="width: 180px;margin-right: 10px;" clearable filterable>
                        <el-option
                            v-for="item in rankArr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户评价："  label-width="180px"  prop="judge">
                    <el-select v-model="cardForm.dictionaryEvaluationId" placeholder="全部" style="width: 180px;margin-right: 10px;" clearable multiple filterable>
                        <el-option
                            v-for="item in judgeArr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工作年限："  label-width="180px"  prop="remark">
                    <el-input-number v-model="cardForm.workYear" controls-position="right" :min="0.1" :max="100" :step="0.1"></el-input-number>
                </el-form-item>
                <el-form-item label="综合评分："  label-width="180px"  prop="remark">
                    <el-input-number v-model="cardForm.serviceScore" controls-position="right" :min="0.1" :max="5" :step="0.1"></el-input-number>
                </el-form-item>
                <el-form-item label="服务人数："  label-width="180px"  prop="remark">
                    <el-input v-model="cardForm.serviceNum" placeholder="服务人数" style="width: 180px;margin-right: 10px;"></el-input>人
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="cardSubmit('cardForm')">提 交</el-button>
                <el-button  @click="cardCancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</div>

<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
</body>
<script th:inline="javascript">
    var gwGroupList = [[${gwGroupList}]]; // 经纪顾问组
    var queryOrg=[[${teleGroupList}]]; // 电销组
    var teleSale = [[${teleSaleList}]];// 顾问
    var roleCode = [[${roleCode}]];// 角色
    var orgId = [[${orgId}]];// 当前账号机构id
    var teleGroupId='';
    var gwGroupId="";
    var teleSaleArr=[];
    var teleGroupDisabled=false;
    if(roleCode=='JJJL'){
    	teleGroupId=orgId;
    	teleSaleArr=teleSale;
    	teleGroupDisabled=true;
    }
    var mainDivVM = new Vue({
        el: '#maindiv',
        data: function() {
            return {
                loading: false,
                isDisabled: false,
                teleGroupDisabled:teleGroupDisabled,
                pager:{ 
                    total: 0,
                    currentPage: 1,
                    pageSize: 20
                },
                form: {
                    teleGroupId: teleGroupId,
                    teleSaleId: '',
                    imAuthorizeStatus: '',
                    gwGroupId:'',
                    teleConId:''
                },
                tableData: [],
                orgTeleArr: queryOrg, // 电销组
                gwGroupList: gwGroupList, // 经纪顾问组
                teleSaleArr: teleSaleArr, // 顾问
                teleConArr:[],
                isAuthorizeArr:[{
                    id:"",
                    name:'全部'
                },{
                    id:1,
                    name:'已授权'
                },{
                    id:2,
                    name:'未授权'
                }], 
                cardVisible:false,//名片
                cardForm: {
                    teleSaleId:'',
                    dictionaryRankId: '',
                    dictionaryEvaluationId: [],
                    workYear: 3,
                    serviceScore: 4.5,
                    serviceNum:'3523',
                },
                rankArr:[],
                judgeArr:[],
                cardFormRules:{},
                cardTeleSale:'',
                editId:'',
            }             
        },
        methods: {  
            changeTeleGroup(selectedValue) {//改变电销组
                this.teleSaleArr = [];
                if (!selectedValue) {
                    return;
                }
                var param = {};
                param.orgId = selectedValue;
                param.roleCode = "JMJJ";
                axios.post('/custservice/saleIm/getSaleList', param)
                    .then(function (response) {
                        var result = response.data;
                        var table = result.data;
                        mainDivVM.teleSaleArr = table;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            changeConGroup(selectedValue) {//改变电销组
                this.teleConArr = [];
                if (!selectedValue) {
                    return;
                }
                var param = {};
                param.orgId = selectedValue;
                param.roleCode = "JMGW";
                axios.post('/custservice/saleIm/getSaleList', param)
                    .then(function (response) {
                        var result = response.data;
                        var table = result.data;
                        mainDivVM.teleConArr = table;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            getRanklist(){// 职级
                axios.get("/saleCard/getDictionaryRank")
                .then(function (response) {
                    console.log(response);
                    var table=response.data;
                    mainDivVM.rankArr=table.data;
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                });
            },
            getJudgelist(){// 职级
                axios.get("/saleCard/getDictionaryEvaluation")
                .then(function (response) {
                    console.log(response);
                    var table=response.data;
                    mainDivVM.judgeArr=table.data;
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                });
            },
            openCard(id,name){// 打开名片
                this.editId="";//编辑id清空                
                this.cardVisible=true;
                this.cardTeleSale=name;
                this.cardForm.teleSaleId=id;
                var param = {};
                param.teleSaleId = id;
                this.loading = true; 
                axios.post('/saleCard/getSaleCard',param).then(function (response) { 
                    mainDivVM.loading = false;
                    console.log(response)
                    var result=response.data;
                    if(result.code==0){
                        var table=result.data;
                        if(table.id){
                            mainDivVM.editId=table.id;//编辑id
                            mainDivVM.cardForm.dictionaryRankId=table.dictionaryRankId;
                            if(table.dictionaryEvaluationId){
                                mainDivVM.cardForm.dictionaryEvaluationId=table.dictionaryEvaluationId.split(',');
                            }else{
                                mainDivVM.cardForm.dictionaryEvaluationId=[];
                            }
                            mainDivVM.cardForm.workYear=table.workYear;
                            mainDivVM.cardForm.serviceScore=table.serviceScore;
                            mainDivVM.cardForm.serviceNum=table.serviceNum;
                        }else{
                            mainDivVM.cardForm.dictionaryRankId='';
                            mainDivVM.cardForm.dictionaryEvaluationId=[];
                            mainDivVM.cardForm.workYear=3;
                            mainDivVM.cardForm.serviceScore=4.5;
                            mainDivVM.cardForm.serviceNum='3523';
                        }                        
                    }else{
                        mainDivVM.isDisabled=false;
                        mainDivVM.$message.error(result.msg);
                    }
                }).catch(function (error) {
                    mainDivVM.loading = false;
                    mainDivVM.$message({
                        message: "请求失败，请稍后重试",
                        type: "error"
                    });
                });
            },
            cardCancel(){// 关闭名片
                this.cardVisible=false;
                this.cardForm.dictionaryRankId='';
                this.cardForm.dictionaryEvaluationId=[];
                this.cardForm.workYear=3;
                this.cardForm.serviceScore=4.5;
                this.cardForm.serviceNum='3523';
                this.editId="";//编辑id清空
            },
            updateStatus(id) {
                //状态调整
                window.location.href="/custservice/saleIm/initUpdatePage?teleSaleId="+id                
            }, 
            untie(id,teleSaleId) {
            	this.$confirm('确定将此顾问进行解绑吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                //解绑
            	 var param = {};
                 param.id=id;
                 param.teleSaleId=teleSaleId;
                 var url="/custservice/saleIm/untie";
                 axios.post(url, param)
                 .then(function (response) {
                   var result =  response.data;
                   if(result.code=="0"){
                	   mainDivVM.$message({message:'解绑成功',type:'success',duration:1000,onClose:function(){
                		   mainDivVM.searchTable();
             	      }});
                     
                   }else{
                     mainDivVM.$message.error("解绑失败");
                   }
                 })
                 .catch(function (error) {
                   console.log(error);
                 });         
                }).catch(() => {
                    
                });
            }, 
            cardSubmit(){
                var param = {};
                if(this.editId){
                    param.id=this.editId;
                }
                param.teleSaleId = this.cardForm.teleSaleId;
                param.dictionaryRankId = this.cardForm.dictionaryRankId;
                param.dictionaryEvaluationId = this.cardForm.dictionaryEvaluationId.join(',');
                param.workYear = this.cardForm.workYear;
                param.serviceScore = this.cardForm.serviceScore;
                param.serviceNum = this.cardForm.serviceNum;

                this.loading = true; 
                axios.post('/saleCard/saveOrUpdate',param).then(function (response) { 
                    mainDivVM.loading = false;
                    console.log(response)
                    // mainDivVM.cardVisible=false;
                    window.location.href="/custservice/saleIm/initListPage"
                }).catch(function (error) {
                    mainDivVM.loading = false;
                    mainDivVM.$message({
                        message: "请求失败，请稍后重试",
                        type: "error"
                    });
                });
            },       
            searchTable(firstPage) {                
                var param = {};
                if(this.form.teleGroupId){
                    param.teleGroupId = this.form.teleGroupId;
                }
                if(this.form.teleSaleId){
                    param.teleSaleId = this.form.teleSaleId;
                }
                if(this.form.gwGroupId){
                    param.teleGroupId = this.form.gwGroupId;
                }
                if(this.form.teleConId){
                    param.teleSaleId = this.form.teleConId;
                }
                param.imAuthorizeStatus = this.form.imAuthorizeStatus;
                param.pageNum = this.pager.currentPage
                param.pageSize = this.pager.pageSize;                
                this.loading = true; 
                axios.post('/custservice/saleIm/list',param).then(function (response) { 
                   mainDivVM.loading = false;
                   console.log(response)
                   var result =  response.data;
                    if(result.code==0){
                        var table=result.data;
                        mainDivVM.tableData= table.data;
                        mainDivVM.pager.total =  table.total;
                        mainDivVM.pager.currentPage = table.currentPage;
                    }else{
                        mainDivVM.isDisabled=false;
                        mainDivVM.$message.error(result.msg);
                    }  
                }).catch(function (error) {
                    mainDivVM.loading = false;
                    mainDivVM.$message({
                        message: "请求失败，请稍后重试",
                        type: "error"
                    });
                });
            },
        },
        created(){
            // 取页数存储
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.pager.pageSize = localVal;}
            this.searchTable();
            this.getRanklist();
            this.getJudgelist();
        },
        mounted(){
            document.getElementById('maindiv').style.display = 'block';
        }
    })
    
</script>
</html>